<template>
  <div class="progress-bar" ref="bar" @click="onClick">
    <div class="progress" ref="progress"></div>
    <div class="btn" ref="btn"
         @touchstart.prevent.stop="onTouchStart"
         @touchmove.prevent.stop="onTouchMove"
         @touchend="onTouchEnd" ></div>
  </div>
</template>

<script>
  import {mapGetters,mapMutations} from 'vuex'
  import {move} from "@/config/mode-config/config";

  export default {
        name: "ProgressBar",
        props: {
            percent: {
                type: Number,
                default: 0
            }
        },
        computed: {
           ...mapGetters('song',['moving'])
        },
        methods: {
            ...mapMutations('song',['setMoving']),
            onTouchStart(e) {
                this.touch.start = e.touches[0].pageX
            },
            onTouchMove(e) {
                this.setMoving(move.moving)
                let end = e.touches[0].pageX
                let offset = end - this.touch.start + this.touch.offset
                this.dragTo(offset)
                this.$emit('percentchanging',this.getPercent())
            },
            onTouchEnd(){
                this.setMoving(move.stop)
                this.touch.offset = this.$refs.progress.offsetWidth
                this.$emit('percentchange',this.getPercent())
            },
            onClick(e){
                this.dragTo(e.offsetX)
                this.$emit('percentchange',this.getPercent())
            },
            dragTo(position){
                if(position < 0 || position > this.progressWidth)
                    return
                this.$refs.progress.style['width'] = `${position}px`
                this.$refs.btn.style['left'] = `${position}px`
            },
            getPercent(){
              return this.$refs.progress.clientWidth / this.progressWidth
            }
        },
        watch: {
            percent(newVal){
                if (this.moving)  return
                this.dragTo(this.progressWidth * newVal)
            }
        },
        mounted(){
          this.touch = {}
          setTimeout(()=>{
                  this.progressWidth = this.$refs.bar.clientWidth - this.$refs.btn.clientWidth
              },20)
        }
    }
</script>

<style scoped lang="stylus">
@import "~common/stylus/variable"
  .progress-bar
    position relative
    width 100%
    height 4px
    border 1px solid rgba(225,225,225,0.3)
    border-radius 5px
    box-sizing border-box
    &::before
      content ''
      position absolute
      top 50%
      transform translateY(-50%)
      width 100%
      height 1.5rem
    .progress
      position absolute
      top 0
      height 100%
      background $color-theme
    .btn
      position absolute
      top 50%
      left 0
      transform translateY(-50%)
      width 20px
      height 20px
      border-radius 50%
      background whitesmoke
      display flex
      justify-content center
      align-items center
      &:before
        position absolute
        content ''
        width 10px
        height 10px
        background $color-theme
        border-radius 50%
</style>
